<!--
 * @Author: your name
 * @Date: 2021-07-30 10:15:51
 * @LastEditTime: 2021-07-30 14:30:09
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \单词\vue3.vue
-->
<template>
<!-- 在vue3中才能用 -->
  <div class="container">
      {{count}} <button @click="add">+1</button>
  </div>
</template>
<script>
import {ref,computed} from 'vue'
export default {
  name: 'App',
  setup(){
    //   1.申明一个简单数据类型的响应式数据
    // 通过proxy代理需要对象，ref函数会包装成对象{value:0},使用poxy进行代理
    // __v_isRef:true 通过ref申明的响应式数据特点，模板解析的时候遇见这个标记，直接取value
    const count = ref(0)

    const add =()=>{
        count.value ++
    }
    
    // 1.计算属性基本算法
    // 有缓存性能好，但依赖数据变化，计算属性变化。
    // computed value is readonly 计算属性不能修改，仅读
    const newCount = computed(()=>{
      return count.value*2
    })

    // 2.计算属性-高级用法
    // 现在年龄
    const age = ref(18)
    // 后年年龄
    const newAge = computed({
      // 读取数据走get
      get(){
        return age.value + 2
      },
      // 修改数据走set
      set(value){
        // 22后年年龄 20岁是现在年龄
        age.value = value - 2
      }
    })

    return {count,add,age,newAge,newCount}
  }
}
</script>
<style scoped lang="less"></style>
